<template>
  <div>
    <Header></Header>
    <div class="creat">
      <div class="center_top">
        <div class="portrait">
          <img src="../assets/img/logo.png" alt="" />
        </div>
        <div class="usermes">
          <h3>{{ user.nickname }}</h3>
          <input
            type="text"
            name=""
            id=""
            placeholder="请编写个性签名"
            v-model="user.int"
          />
        </div>
      </div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="creatType(1)">上传资源</el-menu-item>
        <el-menu-item index="3" @click="creatType(2)">发布文章</el-menu-item>
        <el-menu-item index="4" @click="creatType(3)">发布视频</el-menu-item>
      </el-menu>
      <div class="line" v-if="navIndex == 1">
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="资源标题"
            prop="title"
            :rules="[{ required: true, message: '标题不能为空' }]"
          >
            <el-input
              type="title"
              v-model.number="numberValidateForm.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:3000/upload/single"
            :on-success="upData"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传word文件，且不超过500kb
            </div>
          </el-upload>

          <el-form-item label="专业类型" prop="region">
            <el-select
              v-model="value1"
              @change="selectMajor()"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in options1"
                :key="i"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="(item, i) in options2"
                :key="i"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('numberValidateForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="line" v-if="navIndex == 2">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章简介" prop="synopsis">
            <el-input v-model="ruleForm.synopsis"></el-input>
          </el-form-item>
          <el-form-item label="专业类型" prop="region">
            <el-select
              v-model="value1"
              @change="selectMajor()"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in options1"
                :key="i"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="(item, i) in options2"
                :key="i"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <el-input
              type="textarea"
              v-model="ruleForm.content"
              placeholder="内容格式标题开头加$,每段后面加//例如($标题//内容//)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitarticleForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="line" v-if="navIndex == 3">
        <el-form
          :model="ruleFormv"
          :rules="rulesv"
          ref="ruleFormv"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="视频标题" prop="title">
            <el-input v-model="ruleFormv.title"></el-input>
          </el-form-item>
          <el-form-item label="视频简介" prop="synopsis">
            <el-input v-model="ruleFormv.synopsis"></el-input>
          </el-form-item>
          <el-form-item label="专业类型" prop="region">
            <el-select
              v-model="value1"
              @change="selectMajor()"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, i) in options1"
                :key="i"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="(item, i) in options2"
                :key="i"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:3000/upload/single"
            :on-success="upvideoData"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip" class="el-upload__tip">只能上传mp4文件</div>
          </el-upload>
          <el-form-item>
            <el-button type="primary" @click="submitvideoForm('ruleFormv')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleFormv')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Header from "../components/Header.vue";

export default {
  data() {
    return {
      user: "",
      activeIndex: "1",
      navIndex: 1,
      numberValidateForm: {
        title: "",
      },
      ruleForm: {
        title: "",
        synopsis: "",
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        synopsis: [
          { required: true, message: "请输入文章简介", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      ruleFormv: {
        title: "",
        synopsis: "",
      },
      rulesv: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        synopsis: [
          { required: true, message: "请输入文章简介", trigger: "blur" },
        ],
      },
      fileList: [],
      nav: [
        {
          firstKind: "公共",
          secondKind: ["公共"],
        },
        {
          firstKind: "哲学",
          secondKind: [
            "哲学",
            "马克思主义哲学",
            "中国哲学",
            "外国哲学",
            "逻辑学",
            "伦理学",
            "美学",
            "宗教学",
            "科学技术哲学",
          ],
        },
        {
          firstKind: "经济学",
          secondKind: [
            "理论经济学",
            "应用经济学",
            "金融",
            "应用统计",
            "税务",
            "国际商务",
            "保险",
            "资产评估",
            "审计",
          ],
        },
        {
          firstKind: "法学",
          secondKind: [
            "法学理论",
            "刑法学",
            "宪法学",
            "诉讼法学",
            "民商法学",
            "经济法学",
            "环境与资源保护法",
            "国际法学",
          ],
        },
        {
          firstKind: "教育学",
          secondKind: [
            "学前教育",
            "高等教育",
            "成人教育",
            "职业技术教育",
            "特殊教育",
            "心理学",
          ],
        },
        {
          firstKind: "文学",
          secondKind: [
            "汉语言文学",
            "中国古代文学",
            "中国现当代文学",
            "中国少数民族语言文学",
            "英语",
            "俄语",
            "法语",
            "德语",
            "日语",
            "阿拉伯语",
          ],
        },
        {
          firstKind: "历史",
          secondKind: [
            "史学史",
            "考古学",
            "历史地理学",
            "历史文献学",
            "中国古代史",
            "中国近代史",
            "世界史",
          ],
        },
        {
          firstKind: "理学",
          secondKind: [
            "数学",
            "物理学",
            "化学",
            "生物学",
            "天文学",
            "大气科学",
            "海洋科学",
            "地质学",
          ],
        },
        {
          firstKind: "工学",
          secondKind: [
            "机械工程",
            "光学工程",
            "材料科学工程",
            "电气工程",
            "电子科学与技术",
            "计算机科学与技术",
            "建筑学",
            "土木工程",
            "交通运输",
            "食品科学",
          ],
        },
        {
          firstKind: "农学",
          secondKind: [
            "作物学",
            "园艺学",
            "农业资源",
            "植物保护",
            "畜牧学",
            "兽医学",
            "林学",
            "水产",
          ],
        },
        {
          firstKind: "医学",
          secondKind: [
            "基础医学",
            "临床医学",
            "口腔医学",
            "中医学",
            "药学",
            "中药学",
            "儿童医学",
            "公共卫生与预防医学",
          ],
        },
        {
          firstKind: "军事学",
          secondKind: [
            "军事历史",
            "战略学",
            "战役学",
            "战术学",
            "军队指挥学",
            "军制学",
            "军队政治",
            "军事装备学",
          ],
        },
        {
          firstKind: "管理学",
          secondKind: [
            "管理科学与工程",
            "工商管理",
            "农林经济管理",
            "公共管理",
            "图书馆、情报与档案管理",
            "兽医学",
            "林学",
            "水产",
          ],
        },

        {
          firstKind: "艺术",
          secondKind: [
            "艺术学",
            "音乐",
            "美术",
            "设计艺术",
            "戏剧戏曲",
            "电影",
            "舞蹈",
            "广播电视艺术",
            "新闻",
          ],
        },
      ],
      options1: [],
      options2: [],
      value1: "",
      value2: "",
    };
  },
  components: { Header },
  created() {
    this.user = JSON.parse(localStorage.getItem("token"));
    this.nav.forEach((e, v) => {
      this.options1.push({
        label: e.firstKind,
        value: v,
      });
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitUpload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    creatType(num) {
      this.navIndex = num;
    },
    selectMajor() {
      this.options2 = [];
      this.nav[this.value1].secondKind.forEach((ele, int) => {
        this.options2.push({
          label: ele,
          value: int,
        });
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    upData(response) {
      const fileName = response.filename;
      var time = new Date().toLocaleDateString();
      axios
        .post(`http://localhost:3000/upload/fileName`, {
          fileName,
          title: this.numberValidateForm.title,
          time,
          type: this.value1 + "-" + this.value2,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "上传成功！！！！",
              type: "success",
            });
          }
        });
    },
    upvideoData(response) {
      const fileName = response.filename;
      var time = new Date().toLocaleDateString();
      var timestamp = (Date.parse(new Date()) + "").substring(0, 10);
      axios
        .post(`http://localhost:3000/upload/creatVideo`, {
          title: this.ruleFormv.title.replace(/\s*/g, ""),
          synopsis: this.ruleFormv.synopsis.replace(/\s*/g, ""),
          time,
          timestamp,
          author: this.user.u_id,
          author_name: this.user.name,
          type: this.value1 + "-" + this.value2,
          fileName
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "上传成功,等待管理员审核~~",
              type: "success",
            });
          }
        });
    },
    //
    submitarticleForm(formName) {
      var time = new Date().toLocaleDateString();
      var timestamp = (Date.parse(new Date()) + "").substring(0, 10);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post(`http://localhost:3000/upload/creatArticle`, {
              title: this.ruleForm.title.replace(/\s*/g, ""),
              synopsis: this.ruleForm.synopsis.replace(/\s*/g, ""),
              content: this.ruleForm.content.replace(/\s*/g, ""),
              time,
              timestamp,
              author: this.user.u_id,
              author_name: this.user.name,
              type: this.value1 + "-" + this.value2,
            })
            .then((ret) => {
              if (ret.data.code == 1) {
                this.$message({
                  showClose: true,
                  message: "上传成功,等待管理员审核~~",
                  type: "success",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitvideoForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitUpload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.creat {
  width: 80%;
  margin: auto;
}
.center_top {
  height: 200px;
  display: flex;
  padding: 120px 0 0 20px;
  box-sizing: border-box;
  background: url(../../public/header.png) no-repeat;
  background-size: 100% 100%;
}
.center_top div.portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid white;
}
.usermes input {
  width: 400px;
  height: 20px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  border: 0;
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 0);
}
.usermes input:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.5);
}
.line {
  width: 80%;
  margin: auto;
  padding-top: 50px;
  min-height: 400px;
}
.demo-ruleForm {
  width: 700px;
  margin: auto;
}
.el-select {
  margin: 0 20px;
}
.el-form-item {
  margin-top: 40px;
}
</style>
